<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站点设置</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        gray: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .tab-active {
                @apply border-primary text-primary font-medium;
            }
            .tab-content {
                @apply hidden;
            }
            .tab-content.active {
                @apply block;
            }
            /* 开关样式 */
            input[type="checkbox"]:checked + label {
                @apply bg-primary;
            }
            input[type="checkbox"]:checked + label .dot {
                @apply translate-x-4;
            }
            /* 取消所有元素的选中高亮背景 */
            ::selection {
                background: transparent;
            }
            input[type="checkbox"]::selection,
            label::selection {
                background: transparent;
            }
        }
    </style>
</head>

<body class="bg-gray-100 font-sans text-gray-800 user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途题库</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-cog mr-2"></i> 站点设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索设置项..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">系统设置</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">站点设置</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">站点设置</h2>
                <p class="text-gray-500 mt-1">配置系统基本信息、显示选项和功能开关</p>
            </div>

            <!-- 选项卡导航 -->
            <div class="bg-white rounded-lg shadow-card overflow-hidden mb-6">
                <div class="border-b border-gray-200">
                    <nav class="flex flex-wrap">
                        <button id="tab-basic" class="tab-btn tab-active px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="basic">
                            <i class="fa fa-info-circle mr-2"></i>
                            <span>基本信息</span>
                        </button>
                        <button id="tab-display" class="tab-btn px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="display">
                            <i class="fa fa-desktop mr-2"></i>
                            <span>显示设置</span>
                        </button>
                        <button id="tab-features" class="tab-btn px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="features">
                            <i class="fa fa-puzzle-piece mr-2"></i>
                            <span>功能开关</span>
                        </button>
                        <button id="tab-security" class="tab-btn px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="security">
                            <i class="fa fa-shield mr-2"></i>
                            <span>安全设置</span>
                        </button>
                        <button id="tab-notifications" class="tab-btn px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="notifications">
                            <i class="fa fa-bell mr-2"></i>
                            <span>通知设置</span>
                        </button>
                        <button id="tab-storage" class="tab-btn px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="storage">
                            <i class="fa fa-database mr-2"></i>
                            <span>存储设置</span>
                        </button>
                        <button id="tab-integrations" class="tab-btn px-4 py-3 border-b-2 border-transparent text-gray-600 hover:text-primary transition-all-300 flex items-center" data-tab="integrations">
                            <i class="fa fa-plug mr-2"></i>
                            <span>第三方集成</span>
                        </button>
                    </nav>
                </div>

                <!-- 选项卡内容 -->
                <div class="p-6">
                    <!-- 基本信息设置 -->
                    <div id="content-basic" class="tab-content active">
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="siteName">站点名称</label>
                                    <input type="text" id="siteName" value="睿途题库"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                    <p class="mt-1 text-xs text-gray-500">显示在浏览器标题和页面顶部的名称</p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="siteDomain">站点域名</label>
                                    <input type="text" id="siteDomain" value="www.ruitubank.com"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                    <p class="mt-1 text-xs text-gray-500">网站的访问域名，不包含http://或https://</p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="siteLogo">站点Logo</label>
                                    <div class="mt-1 flex items-center">
                                        <img src="https://picsum.photos/id/20/80/80" alt="当前Logo" class="h-12 w-12 object-cover rounded mr-4">
                                        <div>
                                            <label class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm">
                                                <span>更换Logo</span>
                                                <input id="siteLogo" name="siteLogo" type="file" class="sr-only" accept="image/*">
                                            </label>
                                            <p class="mt-1 text-xs text-gray-500">推荐尺寸: 200×80px，支持PNG、JPG格式</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="siteFavicon">站点图标(Favicon)</label>
                                    <div class="mt-1 flex items-center">
                                        <img src="https://picsum.photos/id/20/40/40" alt="当前Favicon" class="h-8 w-8 object-cover rounded mr-4">
                                        <div>
                                            <label class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm">
                                                <span>更换图标</span>
                                                <input id="siteFavicon" name="siteFavicon" type="file" class="sr-only" accept="image/*">
                                            </label>
                                            <p class="mt-1 text-xs text-gray-500">推荐尺寸: 32×32px，支持PNG、ICO格式</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="siteDescription">站点描述</label>
                                    <textarea id="siteDescription" rows="3"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">睿途题库是一个专业的教育资源平台，提供丰富的教材和试题资源，助力教学与学习。</textarea>
                                    <p class="mt-1 text-xs text-gray-500">用于搜索引擎优化和介绍页面</p>
                                </div>
                                
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="contactEmail">联系邮箱</label>
                                    <input type="email" id="contactEmail" value="contact@ruitubank.com"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                    <p class="mt-1 text-xs text-gray-500">用于接收系统通知和用户反馈</p>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 显示设置 -->
                    <div id="content-display" class="tab-content">
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">默认主题</label>
                                    <div class="space-y-2">
                                        <div class="flex items-center">
                                            <input id="theme-light" name="theme" type="radio" checked
                                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                            <label for="theme-light" class="ml-2 block text-sm text-gray-700">
                                                浅色主题
                                            </label>
                                        </div>
                                        <div class="flex items-center">
                                            <input id="theme-dark" name="theme" type="radio"
                                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                            <label for="theme-dark" class="ml-2 block text-sm text-gray-700">
                                                深色主题
                                            </label>
                                        </div>
                                        <div class="flex items-center">
                                            <input id="theme-auto" name="theme" type="radio"
                                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                            <label for="theme-auto" class="ml-2 block text-sm text-gray-700">
                                                自动切换（跟随系统）
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="defaultLanguage">默认语言</label>
                                    <select id="defaultLanguage"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <option value="zh-CN" selected>简体中文</option>
                                        <option value="en-US">English (US)</option>
                                        <option value="zh-TW">繁体中文</option>
                                        <option value="ja-JP">日本語</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">显示元素设置</label>
                                    <div class="space-y-2 mt-2">
                                        <div class="flex items-center">
                                            <input id="showBreadcrumb" name="showBreadcrumb" type="checkbox" checked
                                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                            <label for="showBreadcrumb" class="ml-2 block text-sm text-gray-700">
                                                显示面包屑导航
                                            </label>
                                        </div>
                                        <div class="flex items-center">
                                            <input id="showFooter" name="showFooter" type="checkbox" checked
                                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                            <label for="showFooter" class="ml-2 block text-sm text-gray-700">
                                                显示页脚信息
                                            </label>
                                        </div>
                                        <div class="flex items-center">
                                            <input id="showUserAvatar" name="showUserAvatar" type="checkbox" checked
                                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                            <label for="showUserAvatar" class="ml-2 block text-sm text-gray-700">
                                                显示用户头像
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="itemsPerPage">默认每页显示数量</label>
                                    <select id="itemsPerPage"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <option value="10">10条/页</option>
                                        <option value="20" selected>20条/页</option>
                                        <option value="50">50条/页</option>
                                        <option value="100">100条/页</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 功能开关 -->
                    <div id="content-features" class="tab-content">
                        <form>
                            <div class="space-y-6">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">用户功能</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">用户注册</label>
                                                <p class="text-xs text-gray-500 mt-0.5">允许新用户注册账号</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableRegistration" checked
                                                    class="sr-only">
                                                <label for="enableRegistration"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">第三方登录</label>
                                                <p class="text-xs text-gray-500 mt-0.5">允许使用微信、QQ等第三方账号登录</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableThirdPartyLogin" checked
                                                    class="sr-only">
                                                <label for="enableThirdPartyLogin"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">个人资料编辑</label>
                                                <p class="text-xs text-gray-500 mt-0.5">允许用户编辑个人资料信息</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableProfileEdit" checked
                                                    class="sr-only">
                                                <label for="enableProfileEdit"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">内容功能</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">内容评论</label>
                                                <p class="text-xs text-gray-500 mt-0.5">允许用户对内容进行评论</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableComments" checked
                                                    class="sr-only">
                                                <label for="enableComments"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">内容分享</label>
                                                <p class="text-xs text-gray-500 mt-0.5">允许用户分享内容到社交媒体</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableSharing" checked
                                                    class="sr-only">
                                                <label for="enableSharing"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">内容下载</label>
                                            </div>
                                        </div>
                                        <div class="relative inline-block w-10 align-middle select-none">
                                            <input type="checkbox" id="enableDownload"
                                                class="sr-only">
                                            <label for="enableDownload"
                                                class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                            <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 安全设置 -->
                    <div id="content-security" class="tab-content">
                        <form>
                            <div class="space-y-6">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">登录安全</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">登录验证码</label>
                                                <p class="text-xs text-gray-500 mt-0.5">启用登录时的验证码验证</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableLoginCaptcha"
                                                    class="sr-only">
                                                <label for="enableLoginCaptcha"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">双因素认证</label>
                                                <p class="text-xs text-gray-500 mt-0.5">启用两步验证增强账户安全</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enable2FA"
                                                    class="sr-only">
                                                <label for="enable2FA"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">登录失败锁定</label>
                                                <p class="text-xs text-gray-500 mt-0.5">多次登录失败后暂时锁定账户</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableLoginLockout" checked
                                                    class="sr-only">
                                                <label for="enableLoginLockout"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">数据安全</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">数据加密</label>
                                                <p class="text-xs text-gray-500 mt-0.5">对敏感数据进行加密存储</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableDataEncryption" checked
                                                    class="sr-only">
                                                <label for="enableDataEncryption"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">自动备份</label>
                                                <p class="text-xs text-gray-500 mt-0.5">定期自动备份系统数据</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableAutoBackup" checked
                                                    class="sr-only">
                                                <label for="enableAutoBackup"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">数据备份频率</label>
                                            <div class="flex space-x-3">
                                                <div class="flex-1">
                                                    <select id="backupFrequency"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                        <option value="daily" selected>每天</option>
                                                        <option value="weekly">每周</option>
                                                        <option value="monthly">每月</option>
                                                    </select>
                                                </div>
                                                <button type="button" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                                                    立即备份
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">会话安全</h4>
                                    <div class="space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">会话超时设置</label>
                                            <div class="flex items-center space-x-2">
                                                <input type="number" id="sessionTimeout" value="30" min="5" max="120"
                                                    class="w-16 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                <span class="text-gray-700">分钟</span>
                                                <p class="text-xs text-gray-500 ml-auto">无操作后自动登出</p>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">多设备登录限制</label>
                                                <p class="text-xs text-gray-500 mt-0.5">限制同一账号同时登录的设备数量</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableDeviceLimit" checked
                                                    class="sr-only">
                                                <label for="enableDeviceLimit"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">允许同时登录设备数</label>
                                            <div class="flex items-center space-x-2">
                                                <input type="number" id="concurrentDevices" value="2" min="1" max="10"
                                                    class="w-16 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                <span class="text-gray-700">台设备</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 通知设置 -->
                    <div id="content-notifications" class="tab-content">
                        <form>
                            <div class="space-y-6">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">系统通知</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">新用户注册通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">有新用户注册时发送通知</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="notifyNewUser" checked
                                                    class="sr-only">
                                                <label for="notifyNewUser"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">系统更新通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">有系统更新可用时发送通知</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="notifySystemUpdate" checked
                                                    class="sr-only">
                                                <label for="notifySystemUpdate"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">数据备份通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">数据备份完成时发送通知</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="notifyBackup" checked
                                                    class="sr-only">
                                                <label for="notifyBackup"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">内容通知</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">新评论通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">有新评论时发送通知</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="notifyNewComment" checked
                                                    class="sr-only">
                                                <label for="notifyNewComment"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">内容审核通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">内容审核通过/拒绝时发送通知</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="notifyContentReview" checked
                                                    class="sr-only">
                                                <label for="notifyContentReview"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">内容举报通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">有内容被举报时发送通知</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="notifyContentReport" checked
                                                    class="sr-only">
                                                <label for="notifyContentReport"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">通知方式</h4>
                                    <div class="space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">邮件通知</label>
                                            <div class="flex items-center space-x-2">
                                                <input type="email" id="notificationEmail" value="admin@ruitubank.com"
                                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableEmailNotification" checked
                                                        class="sr-only">
                                                    <label for="enableEmailNotification"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">短信通知</label>
                                            <div class="flex items-center space-x-2">
                                                <input type="tel" id="notificationPhone" value="" placeholder="请输入手机号"
                                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableSMSNotification"
                                                        class="sr-only">
                                                    <label for="enableSMSNotification"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">站内消息通知</label>
                                                <p class="text-xs text-gray-500 mt-0.5">在系统内显示通知消息</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableInAppNotification" checked
                                                    class="sr-only">
                                                <label for="enableInAppNotification"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 存储设置 -->
                    <div id="content-storage" class="tab-content">
                        <form>
                            <div class="space-y-6">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">存储位置</h4>
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">本地存储</label>
                                                <p class="text-xs text-gray-500 mt-0.5">将文件存储在本地服务器</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableLocalStorage" checked
                                                    class="sr-only">
                                                <label for="enableLocalStorage"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">云存储</label>
                                                <p class="text-xs text-gray-500 mt-0.5">将文件存储在云服务器</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableCloudStorage"
                                                    class="sr-only">
                                                <label for="enableCloudStorage"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                            </div>
                                        </div>
                                        
                                        <div id="cloudStorageSettings" class="hidden pl-4 border-l-2 border-gray-200">
                                            <div class="space-y-3">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="cloudProvider">云存储提供商</label>
                                                    <select id="cloudProvider"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                        <option value="aliyun">阿里云OSS</option>
                                                        <option value="tencent">腾讯云COS</option>
                                                        <option value="qiniu">七牛云</option>
                                                        <option value="aws">AWS S3</option>
                                                    </select>
                                                </div>
                                                
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="accessKey">Access Key</label>
                                                    <input type="text" id="accessKey" placeholder="请输入Access Key"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                </div>
                                                
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="secretKey">Secret Key</label>
                                                    <input type="password" id="secretKey" placeholder="请输入Secret Key"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                </div>
                                                
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="bucketName">Bucket名称</label>
                                                    <input type="text" id="bucketName" placeholder="请输入Bucket名称"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                </div>
                                                
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="endpoint">Endpoint</label>
                                                    <input type="text" id="endpoint" placeholder="请输入Endpoint"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">文件设置</h4>
                                    <div class="space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">最大上传文件大小</label>
                                            <div class="flex items-center space-x-2">
                                                <input type="number" id="maxUploadSize" value="100" min="1" max="1024"
                                                    class="w-16 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                <span class="text-gray-700">MB</span>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">允许的文件类型</label>
                                            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                                                <div class="flex items-center">
                                                    <input type="checkbox" id="allowImage" checked
                                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                    <label for="allowImage" class="ml-2 block text-sm text-gray-700">
                                                        图片
                                                    </label>
                                                </div>
                                                <div class="flex items-center">
                                                    <input type="checkbox" id="allowVideo" checked
                                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                    <label for="allowVideo" class="ml-2 block text-sm text-gray-700">
                                                        视频
                                                    </label>
                                                </div>
                                                <div class="flex items-center">
                                                    <input type="checkbox" id="allowAudio" checked
                                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                    <label for="allowAudio" class="ml-2 block text-sm text-gray-700">
                                                        音频
                                                    </label>
                                                </div>
                                                <div class="flex items-center">
                                                    <input type="checkbox" id="allowDocument" checked
                                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                    <label for="allowDocument" class="ml-2 block text-sm text-gray-700">
                                                        文档
                                                    </label>
                                                </div>
                                                <div class="flex items-center">
                                                    <input type="checkbox" id="allowCompressed" checked
                                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                    <label for="allowCompressed" class="ml-2 block text-sm text-gray-700">
                                                        压缩文件
                                                    </label>
                                                </div>
                                                <div class="flex items-center">
                                                    <input type="checkbox" id="allowOther"
                                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                    <label for="allowOther" class="ml-2 block text-sm text-gray-700">
                                                        其他文件
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">自定义允许的文件扩展名</label>
                                            <input type="text" id="customFileExtensions" placeholder="例如: pdf, docx, xlsx" value="pdf, docx, xlsx, pptx"
                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                            <p class="mt-1 text-xs text-gray-500">多个扩展名用逗号分隔</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">存储使用情况</h4>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-medium text-gray-700">总存储空间</span>
                                                <span class="text-sm text-gray-700">100 GB</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: 35%"></div>
                                            </div>
                                            <div class="flex justify-between mt-1">
                                                <span class="text-xs text-gray-500">已使用: 35 GB</span>
                                                <span class="text-xs text-gray-500">剩余: 65 GB</span>
                                            </div>
                                        </div>
                                        
                                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                            <div class="bg-white p-3 rounded-lg border border-gray-200">
                                                <div class="text-sm text-gray-500">图片</div>
                                                <div class="text-lg font-medium text-gray-800 mt-1">12.5 GB</div>
                                                <div class="text-xs text-gray-500 mt-1">35%</div>
                                            </div>
                                            <div class="bg-white p-3 rounded-lg border border-gray-200">
                                                <div class="text-sm text-gray-500">视频</div>
                                                <div class="text-lg font-medium text-gray-800 mt-1">18.2 GB</div>
                                                <div class="text-xs text-gray-500 mt-1">52%</div>
                                            </div>
                                            <div class="bg-white p-3 rounded-lg border border-gray-200">
                                                <div class="text-sm text-gray-500">音频</div>
                                                <div class="text-lg font-medium text-gray-800 mt-1">2.3 GB</div>
                                                <div class="text-xs text-gray-500 mt-1">7%</div>
                                            </div>
                                            <div class="bg-white p-3 rounded-lg border border-gray-200">
                                                <div class="text-sm text-gray-500">文档</div>
                                                <div class="text-lg font-medium text-gray-800 mt-1">2.0 GB</div>
                                                <div class="text-xs text-gray-500 mt-1">6%</div>
                                            </div>
                                        </div>
                                        
                                        <div class="flex justify-end">
                                            <button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
                                                查看详细报告
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 第三方集成 -->
                    <div id="content-integrations" class="tab-content">
                        <form>
                            <div class="space-y-6">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-800 mb-3">支付集成</h4>
                                    
                                    <div class="mb-4">
                                        <div class="flex items-center justify-between mb-3">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">支付宝</label>
                                                <p class="text-xs text-gray-500 mt-0.5">集成支付宝支付功能</p>
                                            </div>
                                            <div class="relative inline-block w-10 align-middle select-none">
                                                <input type="checkbox" id="enableAlipay" checked
                                                    class="sr-only">
                                                <label for="enableAlipay"
                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                            </div>
                                        </div>
                                        
                                        <div id="alipaySettings" class="pl-4 border-l-2 border-gray-200">
                                            <div class="space-y-3">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="alipayAppId">App ID</label>
                                                    <input type="text" id="alipayAppId" placeholder="请输入支付宝App ID" value="2021001111111111"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                </div>
                                                
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="alipayPublicKey">应用公钥</label>
                                                    <textarea id="alipayPublicKey" rows="3" placeholder="请输入支付宝应用公钥"
                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAnMbX71rYhYH7c5qQfX4d3lBmzJQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2JjQJz3xJjH2J

                                                    


                                                        <div class="flex items-center justify-between">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">微信支付</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">集成微信支付功能</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableWechatPay"
                                                                    class="sr-only">
                                                                <label for="enableWechatPay"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="p-4 bg-gray-50 rounded-lg">
                                                    <h4 class="font-medium text-gray-800 mb-3">社交登录</h4>
                                                    
                                                    <div class="mb-4">
                                                        <div class="flex items-center justify-between mb-3">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">微信登录</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">集成微信第三方登录</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableWechatLogin" checked
                                                                    class="sr-only">
                                                                <label for="enableWechatLogin"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="wechatLoginSettings" class="pl-4 border-l-2 border-gray-200">
                                                            <div class="space-y-3">
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="wechatAppId">App ID</label>
                                                                    <input type="text" id="wechatAppId" placeholder="请输入微信App ID" value="wx1234567890abcdef"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                                
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="wechatAppSecret">App Secret</label>
                                                                    <input type="password" id="wechatAppSecret" placeholder="请输入微信App Secret" value="****************"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="mb-4">
                                                        <div class="flex items-center justify-between mb-3">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">QQ登录</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">集成QQ第三方登录</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableQQLogin"
                                                                    class="sr-only">
                                                                <label for="enableQQLogin"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="qqLoginSettings" class="pl-4 border-l-2 border-gray-200 hidden">
                                                            <div class="space-y-3">
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="qqAppId">App ID</label>
                                                                    <input type="text" id="qqAppId" placeholder="请输入QQ App ID"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                                
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="qqAppKey">App Key</label>
                                                                    <input type="password" id="qqAppKey" placeholder="请输入QQ App Key"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div>
                                                        <div class="flex items-center justify-between mb-3">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">微博登录</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">集成微博第三方登录</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableWeiboLogin"
                                                                    class="sr-only">
                                                                <label for="enableWeiboLogin"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="weiboLoginSettings" class="pl-4 border-l-2 border-gray-200 hidden">
                                                            <div class="space-y-3">
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="weiboAppKey">App Key</label>
                                                                    <input type="text" id="weiboAppKey" placeholder="请输入微博App Key"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                                
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="weiboAppSecret">App Secret</label>
                                                                    <input type="password" id="weiboAppSecret" placeholder="请输入微博App Secret"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="p-4 bg-gray-50 rounded-lg">
                                                    <h4 class="font-medium text-gray-800 mb-3">数据分析</h4>
                                                    
                                                    <div class="mb-4">
                                                        <div class="flex items-center justify-between mb-3">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">Google Analytics</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">集成Google Analytics数据分析</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableGoogleAnalytics"
                                                                    class="sr-only">
                                                                <label for="enableGoogleAnalytics"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="googleAnalyticsSettings" class="pl-4 border-l-2 border-gray-200 hidden">
                                                            <div class="space-y-3">
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="googleAnalyticsId">Tracking ID</label>
                                                                    <input type="text" id="googleAnalyticsId" placeholder="请输入Google Analytics Tracking ID"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="mb-4">
                                                        <div class="flex items-center justify-between mb-3">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">百度统计</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">集成百度统计数据分析</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableBaiduAnalytics"
                                                                    class="sr-only">
                                                                <label for="enableBaiduAnalytics"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="baiduAnalyticsSettings" class="pl-4 border-l-2 border-gray-200 hidden">
                                                            <div class="space-y-3">
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="baiduAnalyticsId">Site ID</label>
                                                                    <input type="text" id="baiduAnalyticsId" placeholder="请输入百度统计Site ID"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div>
                                                        <div class="flex items-center justify-between mb-3">
                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700">自定义统计代码</label>
                                                                <p class="text-xs text-gray-500 mt-0.5">添加自定义统计代码</p>
                                                            </div>
                                                            <div class="relative inline-block w-10 align-middle select-none">
                                                                <input type="checkbox" id="enableCustomAnalytics"
                                                                    class="sr-only">
                                                                <label for="enableCustomAnalytics"
                                                                    class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="customAnalyticsSettings" class="pl-4 border-l-2 border-gray-200 hidden">
                                                            <div class="space-y-3">
                                                                <div>
                                                                    <label class="block text-sm font-medium text-gray-700 mb-1" for="customAnalyticsCode">统计代码</label>
                                                                    <textarea id="customAnalyticsCode" rows="4" placeholder="请输入自定义统计代码"
                                                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="mt-6 flex justify-end">
                                            <button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 mr-3">
                                                取消
                                            </button>
                                            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                                                保存设置
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <script>
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有选项卡和内容区域
            const tabs = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            // 显示第一个选项卡内容
            if(tabContents.length > 0) {
                tabContents[0].classList.add('active');
            }
            
            // 为每个选项卡添加点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    // 移除所有选项卡的活跃状态
                    tabs.forEach(t => {
                        t.classList.remove('tab-active');
                        t.classList.remove('border-primary');
                        t.classList.add('border-transparent');
                    });
                    
                    // 添加当前选项卡的活跃状态
                    tab.classList.add('tab-active');
                    tab.classList.remove('border-transparent');
                    tab.classList.add('border-primary');
                    
                    // 获取要显示的内容ID
                    const targetTab = tab.getAttribute('data-tab');
                    const targetId = 'content-' + targetTab;
                    
                    // 隐藏所有内容区域
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    
                    // 显示目标内容区域
                    const targetContent = document.getElementById(targetId);
                    if(targetContent) {
                        targetContent.classList.add('active');
                    }
                });
            });
            
            // 处理开关切换
            const toggles = document.querySelectorAll('input[type="checkbox"]');
            toggles.forEach(toggle => {
                toggle.addEventListener('change', function() {
                    const id = this.id;
                    const settingsDivId = id.replace('enable', '') + 'Settings';
                    const settingsDiv = document.getElementById(settingsDivId);
                    
                    if(settingsDiv) {
                        if(this.checked) {
                            settingsDiv.classList.remove('hidden');
                        } else {
                            settingsDiv.classList.add('hidden');
                        }
                    }
                });
            });
            
            // 初始化开关状态
            toggles.forEach(toggle => {
                const id = toggle.id;
                const settingsDivId = id.replace('enable', '') + 'Settings';
                const settingsDiv = document.getElementById(settingsDivId);
                
                if(settingsDiv) {
                    if(toggle.checked) {
                        settingsDiv.classList.remove('hidden');
                    } else {
                        settingsDiv.classList.add('hidden');
                    }
                }
            });
        });
    </script>    
</body>
</html>